<template>
  <view class="container">
    <image class="tixianBg" src="../../static/images/tixianBg.png" mode="aspectFill"></image>
    <view class="main">
      <uv-navbar title="申请提现" leftIconColor="#fff" autoBack bgColor="rgba(0,0,0,0)" :title-style="{'color':'#fff'}"
        placeholder></uv-navbar>
      <view class="blance">
        <image class="blance_icon" src="../../static/images/qiandai.png" mode=""></image>
        <view class="blance_count">6856.45</view>
        <view class="blance_label">余额（元）</view>
      </view>
      <!-- 提现金额 -->
      <view class="withDraw">
        <view class="withDraw-tp">
          <view class="withDraw-tp-label">
            提现金额
          </view>
        </view>
        <view class="withDraw-mid">
          <text class="unit">￥</text>
          <input class="ipt" placeholder-class="styles" type="text" placeholder="请输入提现金额" />
        </view>
        <view class="withDraw-bom">
          <view class="withDraw-bom-fl">
            可提现补贴：<text class="withDraw-bom-fl-value">￥1.90</text>
          </view>
          <view class="withDraw-bom-fr">
            全部提现
          </view>
        </view>
        <view class="withDraw-btn" @click="toTixian">
          确定提现
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      toTixian(){
        uni.navigateTo({
          url: "/pages/mine/addForm"
        })
      }
    }
  }
</script>
<style>
  .styles{
    font-weight: 400;
    font-size: 32rpx;
    color: #AAAAAA;
  }
</style>
<style lang="scss" scoped>

  .container {
    position: relative;

    .tixianBg {
      width: 100vw;
      height: 100vh;
      position: absolute;
      left: 0;
      top: 0;
    }

    .main {
      position: relative;
      z-index: 50;
      padding: 0 40rpx;
      box-sizing: border-box;
      .blance {
        display: flex;
        flex-direction: column;
        align-items: center;

        .blance_icon {
          width: 90rpx;
          height: 90rpx;
          margin-top: 40rpx;
        }

        .blance_count {
          font-weight: bold;
          font-size: 60rpx;
          color: #FFFFFF;
          margin: 40rpx 0;
        }

        .blance_label {
          font-weight: 400;
          font-size: 24rpx;
          color: #FFFFFF;
          opacity: .8;
        }
      }
      .withDraw{
        padding: 30rpx;
        box-sizing: border-box;
        border-radius: 40rpx;
        background: #fff;
        .withDraw-tp{
          display: flex;
          justify-content: space-between;
          .withDraw-tp-label{
            font-weight: 400;
            font-size: 28rpx;
            color: #000000;
          }
        }
        .withDraw-mid{
          display: flex;
          padding: 20rpx 0;
          box-sizing: border-box;
          border-bottom: 2rpx solid #eee;
          margin-top: 30rpx;
          .unit{
            font-weight: 400;
            font-size: 32rpx;
            color: #333333;
          }
          .ipt{
            font-weight: 400;
            font-size: 32rpx;
            color: #222;
            padding: 0 30rpx;
            box-sizing: border-box;
          }
        }
        .withDraw-bom{
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20rpx;
          .withDraw-bom-fl{
            font-weight: 400;
            font-size: 24rpx;
            color: #666666;
            .withDraw-bom-fl-value{
              color: #EA2222;
            }
          }
          .withDraw-bom-fr{
            font-weight: 400;
            font-size: 24rpx;
            color: #EA7222;
          }
        }
        .withDraw-btn{
          width: 100%;
          height: 88rpx;
          background: linear-gradient( 270deg, #FF3C21 0%, #EA7222 100%);
          border-radius: 88rpx;
          font-weight: bold;
          font-size: 32rpx;
          color: #FFFFFF;
          text-align: center;
          line-height: 88rpx;
          margin-top: 50rpx;
        }
      }
    }

  }
</style>